<template>
  <view class="nav">
    <view :style="'height:'+status+'rpx;'+containerStyle"></view>
    <view v-if="isHome" class="headNav" :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;padding-left:20rpx;'">
      <text class="city">中部地区</text>
	  <view :style="'flex:1'">
		  <navigator url="../../pages/search/index"
		  :style="
		  'height:'+menu.height*2+'rpx;line-height:'+menu.height*2+
		  'rpx;margin-top:'+(menu.top*2-status)+'rpx;margin-left:32rpx;margin-right:'
		  +(menu.width*2+24)+'rpx;background:#f4f4f4;border-radius:200rpx;text-align:center'
		  "
		  >
			  <text class="search-text"> 找医院</text>
		  </navigator>
	  </view>
    </view>
    <view v-else class="navbar" :style="'height:'+navHeight+'rpx;'+containerStyle">
      <view class="back-icon" @click="backOrHome">
        <image v-if="pages>1" src="../../static/resource/navbar/ic_back.png"></image>		
        <image v-else src="../../static/resource/navbar/ic_home.png"></image>		
      </view>
      <view class="nav-title" v-if="titleText">
        <view :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;'+textStyle">{{titleText}}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onBeforeMount, reactive } from 'vue';

const props = defineProps({
  background: {
    type: String,
    default: "rgba(255,255,255,1)"
  },
  color: {
    type: String,
    default: 'rgba(0,0,0,1)'
  },
  fontSize: {
    type: String,
    default: 32
  },
  iconWidth: {
    type: String,
    default: 116
  },
  iconHeight: {
    type: String,
    default: 38
  },
  titleText: {
    type: String,
    default: ''
  },
  isHome:{
	  type:Boolean,
	  default:true
  }
});
const emits=defineEmits(['navBarAttached'])
onBeforeMount(() => {
  setNavSize();
  setStyle();
  emits('navBarAttached',{
	  detail:{
		  statusHeight:status.value,
		  navHeight:navHeight.value,
		  navBarHeight:status.value+navHeight.value
	  }
  })
});

// 状态栏高度
const status = ref(0);
// 内容高度
const navHeight = ref(0);
// 背景色
const containerStyle = ref('');
// 字体样式
const textStyle = ref('');
// 图标的样式
const iconStyle = ref('');
// 页面站的数量
const pages = ref(getCurrentPages().length);
 //页面右上角的胶囊
const menu =reactive(uni.getMenuButtonBoundingClientRect()) 
 
const setNavSize = () => {
  const { system, statusBarHeight } = uni.getSystemInfoSync();
  status.value = statusBarHeight * 2;
  console.log("这是status.value", uni.getSystemInfoSync());
  const isiOS = system.indexOf('iOS') > -1;
  navHeight.value = isiOS ? 88 : 96;
};
const setStyle = () => { 
  containerStyle.value = ['background:' + props.background].join(';');
  textStyle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(';');
  iconStyle.value = ['width:' + props.iconWidth + 'rpx', 'height:' + props.iconHeight + 'rpx'].join(';');
};

const backOrHome = () => {
  if (pages.value > 1) {
    uni.navigateBack();
  } else {
    uni.switchTab({
      url: '/pages/index/index'
    });
  }
};
</script>

<style lang="scss">
.nav {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}
.back-icon {
	display: flex;
	align-items: center;
	width: 64rpx;
	height: 100%;
	margin-left: 20rpx;
}
.back-icon image {
	width: 64rpx;
	height: 64rpx;
}
.navbar {
	position: relative;
}
.nav-title {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
}
.headNav {
	display: flex;
}
.city {
	display: inline-block;
	position: relative;
	font-size: 30rpx;
	font-weight: bold;
	padding-left: 55rpx;
	background: url()
		no-repeat left center / 40rpx;
}
// 手写 >
.city:after {
	content: ' ';
	display: inline-block;
	height: 6px;
	width: 6px;
	border-width: 1px 1px 0 0;
	border-color: #353535;
	border-style: solid;
	-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	position: relative;
	top: -2px;
	position: absolute;
	top: 50%;
	margin-top: -4px;
	right: -10px;
}
.search-text {
	display: inline-block;
	padding-left: 30rpx;
	color: #bbbbbb;
	font-size: 26rpx;
	background: url()
		no-repeat left center / 23rpx;
}
</style>